<template>
  <div class="header_title">
    <p class="header_p">医院后台管理系统</p>
    <span class="header_span">Hospital Backstage Management System</span>
    <div class="h_button1">
      <span>欢迎您，{{ username }}</span>
      <el-button 
        type="primary"
        style="border:none" 
        @click="logoff"
      >注销</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: sessionStorage.getItem('username')
    }
  },
  methods: {
    logoff() {
      this.$confirm('确认退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          sessionStorage.removeItem('rybToken')
          sessionStorage.removeItem('username')
          sessionStorage.removeItem('ayid')
          sessionStorage.removeItem('ydmc')
          this.$message({
            type: 'success',
            message: '已退出'
          })
          this.$router.push('/')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style>
.header_title {
  text-align: left;
  line-height: 30px;
  padding: 0 4.5%;
  background: #fff;
  box-shadow: -1px 1px 6px #ccc;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1002;
}
.header_p {
  font-size: 18px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  color: #404c5c;
}
.header_span {
  font-size: 12px;
  height: 20px;
  display: block;
  color: #aaa;
  line-height: 5px;
}
.h_button1 {
  float: right;
  font-size: 15px;
  display: inline-block;
  margin-top: -50px;
}
</style>
